@charset "UTF-8";
//-----------------------------------------------------
// grid scss
// 支持固定宽度和百分比宽度，可以控制是否输出span的class
//-----------------------------------------------------

// thanks:
// http://www.blankwork.net/
// http://semantic.gs/
// http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/
// https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_flex-grid.scss
// http://bjorkoy.com/2010/05/css-grids-with-sass/

// variables
// 这里设计的是1000px的布局，每个栅格为65px，共12个，计算公式：(65+20)*12-20 = 1000
// 10删格 这里设计的是1000px的布局，每个栅格为82px，共10个，计算公式：(85+20)*10-20 = 1000 20150813
// 如果将gridColumnWidth设置为60px，就是盛名的960网格系统
//-----------------------------------------------------
$gridColumns:                     12 !default;      // Total number of columns
$gridColumnWidth:                 65px !default;   // Width of a single column
$gridGutter:                      20px !default;     // Width of the gutter
$gridSystemWidth:                 $gridColumns * ($gridColumnWidth + $gridGutter); //grid system width

//20150813
$gridColumns2:                     10 !default;      // Total number of columns
$gridColumnWidth2:                 160px !default;   // Width of a single column
$gridSystemWidth2:                 $gridColumns2 * ($gridColumnWidth2 + $gridGutter); //grid system width
$gridGutter2:                      20px !default;     // Width of the gutter
//end

$rem-gridColumnWidth:             1.331333333333rem !default;
$rem-gridGutter:                  0 !default;

//lgh 20150708 start
$gridColumnWidthN:                 85px !default;   //1020/12=85
$gridSystemWidthN:                 $gridColumns * $gridColumnWidthN; //grid system width
// end

// percent layout setting
// 百分比布局的变量设置
//-----------------------------------------------------
$gridPercentSwitch:               false !default; // 默认为固定宽度布局，设置为true为百分比
$gridPercentSwitch2:              false !default; // 默认为固定宽度布局，设置为true为百分比
$gridRealWidth:                   $gridSystemWidth !default;
$gridRealWidthN:                  $gridSystemWidthN !default;
$gridRealWidth2:                  $gridSystemWidth2 !default;
$gridGutterPercent2:              percentage($gridGutter2 / $gridSystemWidth2) !default;
$gridGutterPercent:               percentage($gridGutter / $gridSystemWidth) !default;

@if $gridPercentSwitch{
  $gridRealWidth:                 100%;
  $gridRealWidthN:                 100%;
}

@if $gridPercentSwitch2{
  $gridRealWidth2:                 100%;
}


// ie6/7 fluid layout bug: http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// ie6/7  getWidth($i, true, $correction)
$gridMinWidth:                    1000 !default;
$gridCorrection:                  0.5 / $gridMinWidth * 100 * 1%;


// margin value
//-----------------------------------------------------
// if fluid layout the value is $gridGutterPercent
// if fixed layout the value is $gridGutter
$gridMarginValue:                 if($gridPercentSwitch, $gridGutterPercent, $gridGutter) !default;

$gridMarginValue2:                 if($gridPercentSwitch2, $gridGutterPercent2, $gridGutter2) !default;


// true for grid class(.span1, .span2...)
// ----------------------------------------
$gridSpanSwitch:                  false !default;

// true for grid class(.span10-1, .span10-2...)
// ----------------------------------------
$gridSpanSwitch2:                  false !default;

// A Function to calculate width:
// 这个函数几乎是blankwork的灵魂，用来计算宽度的
// Example usage: (based on default values)
// getWidth(3, false) would return 240px
// getWidth(3) or getWidth(3, true) would return 220px;
// and plain getWidth() or getWidth would return 940px;
@function getWidth($i:$gridColumns, $onlyInnerWidth:true, $subtract:0){
  // First set a default return value
  $return: (($gridColumnWidth + $gridGutter) * $i / $gridSystemWidth) * $gridRealWidth - $subtract !default;

  // If we want to get only the inner width (without gutter)
  @if $onlyInnerWidth == true {
    // Return the total calculated width, without the margins
    // If the second parameter of this function is not specified
    // This is what is going to be returned
    $return: ((($gridColumnWidth + $gridGutter) * $i - $gridGutter) / $gridSystemWidth) * $gridRealWidth - $subtract;
  }

  @return $return;
}

@function getWidth2($i:$gridColumns2, $onlyInnerWidth:true, $subtract:0){
  // First set a default return value
  $return: (($gridColumnWidth2 + $gridGutter) * $i / $gridSystemWidth2) * $gridRealWidth2 - $subtract !default;

  // If we want to get only the inner width (without gutter)
  @if $onlyInnerWidth == true {
    // Return the total calculated width, without the margins
    // If the second parameter of this function is not specified
    // This is what is going to be returned
    $return: ((($gridColumnWidth2 + $gridGutter) * $i - $gridGutter) / $gridSystemWidth2) * $gridRealWidth2 - $subtract;
  }

  @return $return;
}

// lgh 20150708
$gridWidSwitch:                  false !default;

@function getwidthNomargin($i:$gridColumns){
  $return: ($gridColumnWidthN * $i / $gridSystemWidthN) * $gridRealWidthN;

  @return $return;
}


// A Function to calculate percent width:
// Example:getPercent(3,6)
@function getPercent($i, $container-columns:$gridColumns, $onlyInnerWidth:false, $subtract:0) {
  $percentage: percentage($i / $container-columns);

  @if $onlyInnerWidth == true {
    $width: $i * $gridColumnWidth + ($i - 1) * $gridGutter;
    $container-width: $container-columns * $gridColumnWidth + ($container-columns - 1) * $gridGutter;
    $percentage: percentage($width / $container-width);
  }

  @return $percentage - $subtract;
}

// A Function to calculate rem width:
// Example:getPercent(3,6)
@function getRem($i:$gridColumns, $onlyInnerWidth:true, $subtract:0){
  // First set a default return value
  $return: ($rem-gridColumnWidth + $rem-gridGutter) * $i  !default;

  // If we want to get only the inner width (without gutter)
  @if $onlyInnerWidth == true {
    // Return the total calculated width, without the margins
    // If the second parameter of this function is not specified
    // This is what is going to be returned
    $return: ($rem-gridColumnWidth + $rem-gridGutter) * $i - $rem-gridGutter - 0.4rem ;
  }

  @return $return;
}

// span or column's gutter
%margin-gutter{
  margin-right: $gridMarginValue/2;
  margin-left: $gridMarginValue/2;

  @if $gridPercentSwitch and $lte7{
    *margin-right: ($gridMarginValue - $gridCorrection)/2;
    *margin-left: ($gridMarginValue - $gridCorrection)/2;
  }
}
// 20150813
%margin-gutter2{
  margin-right: $gridMarginValue2/2;
  margin-left: $gridMarginValue2/2;

  @if $gridPercentSwitch and $lte7{
    *margin-right: ($gridMarginValue2 - $gridCorrection)/2;
    *margin-left: ($gridMarginValue2 - $gridCorrection)/2;
  }
}
%margin-gutter-2{
  margin-right: -$gridMarginValue2/2;
  margin-left: -$gridMarginValue2/2;

  @if $gridPercentSwitch and $lte7{
    *margin-right: -($gridMarginValue2 - $gridCorrection)/2;
    *margin-left: -($gridMarginValue2 - $gridCorrection)/2;
  }
}

// for >= ie9
// col or column's gutter
%margin-gutter-rem{
  margin-right: (0.4/2)rem;
  margin-left:  (0.4/2)rem;
}

// Column Mixin:
// We're defining the default values as follows:
// Default Column Count: Max Column Count
// Padding (explained below): 0
@mixin column($i: $gridColumns, $subtract:0){
  // 解决当$i 小于$gridColumns的时候需要float
  @if $i < $gridColumns {
    @extend %float;
  }
  @extend %margin-gutter;

  $getWidth: getWidth($i, true, $subtract); // Use the width calculation function to get the width
  width: $getWidth;

  @if $gridPercentSwitch and $lte7{
    *width:$getWidth - $gridCorrection;
  }
}

// wrapper
// This typically is a main content wrapper,
// But just in case someone finds an alternative use of this,
// we shouldhave the flexibility
// So wrapper( column count, center ?, subtract)
@mixin wrapper($i: $gridColumns, $center:true, $subtract:0){
  @extend %clearfix;

  // Because this is a wrapper, we don't need the outer gutter - we need the full width
  $getWrapperWidth: getWidth($i, false);
  // In case there is a need to subtract the wrapper
  $wrapperWidth: $getWrapperWidth - $subtract;
  width:$wrapperWidth;

  // If we want the wrapper to be centered (by default we do)
  @if $center == true {
    margin-left:auto;
    margin-right:auto;
  }
}


// alpha & omega
//-----------------------------------------------------
@mixin alpha{
  margin-left:0;
}
@mixin omega{
  margin-right:0;
}


// prepend & append
//-----------------------------------------------------
@mixin prepend($i:1, $subtract:0){
  margin-left: getWidth($i,false,$subtract);
}
@mixin append($i:1, $subtract:0){
  margin-right: getWidth($i,false,$subtract);
}
